<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>邀请好友</title>
    <link rel="stylesheet" href="../assets/css/mui.min.css">
    <!-- 自定义的公共样式表 -->
    <link rel="stylesheet" href="../assets/css/lib.common.css">
    <!-- 页面样式 -->
    <link rel="stylesheet" href="../assets/css/app.css">
    <link rel="stylesheet" href="../assets/css/animate3.1.5.css">
    <script src="../assets/js/mui.min.js"></script>
    <!-- 点击复制文本 -->
    <script src="../assets/js/clipboard.min.js"></script>
    <!-- 自定义的js脚本 -->
    <script src="../assets/js/lib.common.js"></script>

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    [endif]-->
</head>
<body>
<!-- 头部状态栏start -->
<header class="mui-bar mui-bar-nav">
    <a url="../个人中心.html" class="mui-icon mui-icon-back dark"></a>
    <h1 class="mui-title black bold">
        邀请好友
    </h1>
</header>
<!-- 头部状态栏end -->

<div class="mui-row bg-white p_t44 p_x10">
    <div class="border m_y10 p_x10 p_y20 radius5">
        <div class="mui-row">
            <div class="mui-col-sm-3 mui-col-xs-3 dark a_r p_r10">邀请链接</div>
            <div class="mui-col-sm-7 mui-col-xs-7">
                <span class="inline w100 mui-ellipsis line25 bg-light-blue radius20 p_x10 text-green">
                    https://www.html.com/yaoqing.html
                </span>
            </div>
            <div class="mui-col-sm-2 mui-col-xs-2">
                <button type="button" class="mui-btn-link copy"
                        data-clipboard-text="https://www.html.com/LasXs133.html">复制
                </button>
            </div>
        </div>
        <div class="mui-row">
            <div class="mui-col-sm-3 mui-col-xs-3 dark a_r p_r10">邀请码</div>
            <div class="mui-col-sm-7 mui-col-xs-7">
                <span class="inline w100 mui-ellipsis  line25 bg-light-blue radius20 p_x10 text-green">
                    LasXs133
                </span>
            </div>
            <div class="mui-col-sm-2 mui-col-xs-2">
                <button type="button" class="mui-btn-link copy"
                        data-clipboard-text="yaoqingma">复制
                </button>
            </div>
        </div>
        <div class="mui-row p_y10">
            <div class="mui-col-sm-6 mui-col-xs-6 a_c p_x20">
                <button type="button" class="mui-btn mui-btn-primary w100 line25" onclick="openSide('.yaoqing-haibao')">
                    邀请海报
                </button>
            </div>
            <div class="mui-col-sm-6 mui-col-xs-6 a_c p_x20">
                <button type="button" class="mui-btn mui-btn-green w100 line25" onclick="openSide()">当面邀请</button>
            </div>
        </div>
    </div>
</div>
<div class="mui-row">
    <div class="mui-col-xs-12 mui-col-sm-12 p_y10 bg-white">
        <!-- 暂无数据占位符 -->
        <!--<p class="no-data">暂无数据</p>-->

        <table class="table font14">
            <tr>
                <th class="text-center black normal font12">
                    <a href="#">邀请账号</a>
                </th>
                <th class="text-center black normal font12">
                    <a href="#">时间</a>
                </th>
                <th class="text-center black normal font12">
                    <a href="#">状态</a>
                </th>
            </tr>
            <tr>
                <td class="text-center">木屋</td>
                <td class="text-center">2019-01-05</td>
                <td class="text-center">
                    <span class="mui-badge mui-badge-green">已认证</span>
                </td>
            </tr>
            <tr>
                <td class="text-center">龙哥</td>
                <td class="text-center">2019-08-15</td>
                <td class="text-center">
                    <span class="mui-badge mui-badge-warning">待认证</span>
                    <!--<span class="mui-badge mui-btn-grey">待认证</span>-->
                    <!--<span class="mui-badge mui-btn-danger">待认证</span>-->
                </td>
            </tr>
        </table>
    </div>

</div>
<div class="">

</div>

<!-- 当面邀请二维码弹框start -->
<div class="lib-aside lib-aside-down shadow2 animated">
    <div class="mui-row">
        <div class="mui-col-xs-11 mui-col-xs-11">
            <h4 class="black p_x10 line30 font14">我的邀请二维码</h4>
        </div>
        <div class="mui-col-xs-1 mui-col-sm-1">
            <i class="mui-icon mui-icon-closeempty f_r text-danger p_x5 line30" onclick="closeSide()"></i>
        </div>
    </div>
    <div class="mui-row">
        <div class="mui-col-sm-12 mui-col-xs-12 p_y25 a_c">
            <span class="inline" id="qr-code">
                <!--二维码内容-->
                <script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
                <script>
                    new QRCode(document.getElementById("qr-code"), {
                        width: 200,
                        height: 200,
                        text: '二维码内容',
                    });
                </script>
            </span>
        </div>
    </div>
</div>
<!-- 当面邀请二维码弹框end -->


<!-- 邀请海报弹框start -->
<div class="lib-aside lib-aside-down shadow2 yaoqing-haibao" style="height: 70%;">
    <div class="mui-row">
        <div class="mui-col-xs-11 mui-col-xs-11">
            <h4 class="black p_x10 line30 font14">我的邀请海报</h4>
        </div>
        <div class="mui-col-xs-1 mui-col-sm-1">
            <i class="mui-icon mui-icon-closeempty f_r text-danger p_x5 line30"
               onclick="htmlImage.closeHtmlModal('.yaoqing-haibao')"></i>
        </div>
    </div>
    <div class="mui-row">
        <div class="mui-col-sm-12 mui-col-xs-12 p_y25">
            <!-- 横向滚动数据区域start -->
            <div style="height: 75%"
                 class="bg-white mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <div class="mui-scroll p_y5">
                    <div class="mui-control-item">
                        <div class="thumb-content mui-row" id="thumb-content-1" style="width: 300px;height: 446px">
                            <div class="mui-col-xs-12 mui-col-sm-12">
                                <div class="yaoqing-haoyou-haibao-image">
                                    <img style="width: 100%;height: 100%" src="../assets/image/hdpi-v4/splash.png">
                                    <div class="mui-input-row mui-radio">
                                        <label style="visibility: hidden">选择</label>
                                        <input class="radio" checked name="haibao" value="thumb-content-1" type="radio">
                                    </div>
                                </div>
                            </div>
                            <div class="mui-col-xs-8 mui-col-sm-8 p_l10 p_y10">
                                <h4>分享的说明标题1111</h4>
                                <p>分享的内容分享内容说明1111111</p>
                            </div>
                            <div class="mui-col-xs-4 mui-col-sm-4 a_c p_y10 p_x5" id="qr-code-1">
                                <!--二维码内容-->
                                <script>
                                    new QRCode(document.getElementById("qr-code-1"), {
                                        width: 75,
                                        height: 75,
                                        text: '二维码内容',
                                    });
                                </script>
                            </div>
                        </div>
                    </div>
                    <div class="mui-control-item">
                        <div class="thumb-content mui-row" id="thumb-content-2" style="width: 300px;height: auto">
                            <div class="mui-col-xs-12 mui-col-sm-12">
                                <div class="yaoqing-haoyou-haibao-image">
                                    <img style="width: 100%;height: 100%" src="../assets/image/hdpi-v4/splash.png">
                                    <div class="mui-input-row mui-radio bg-white">
                                        <label style="visibility: hidden">选择</label>
                                        <input class="radio" name="haibao" value="thumb-content-2" type="radio">
                                    </div>
                                </div>
                            </div>
                            <div class="mui-col-xs-8 mui-col-sm-8 p_l10 p_y10">
                                <h4>分享的说明标题222222</h4>
                                <p>分享的内容分享内容说明2222222</p>
                            </div>
                            <div class="mui-col-xs-4 mui-col-sm-4 a_c p_y10 p_x5" id="qr-code-2">
                                <!--二维码内容-->
                                <script>
                                    new QRCode(document.getElementById("qr-code-2"), {
                                        width: 75,
                                        height: 75,
                                        text: '二维码内容',
                                    });
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 横向滚动数据区域start -->
        </div>
        <div class="mui-row bg-white p_b10">
            <div class="mui-col-xs-12 mui-col-sm-12 a_c ">
                <span class="mui-btn mui-btn-primary" onclick="shareImage()">分享</span>
                <span class="mui-btn btn-green"
                      onclick="saveFile()">下载图片</span>
                <span class="mui-btn mui-btn-danger" onclick="htmlImage.closeHtmlModal('.yaoqing-haibao')">关闭</span>
            </div>
        </div>
    </div>
</div>
<!-- 邀请海报弹框end -->
</body>

</html>
<!-- 截图 -->
<script src="../assets/js/html2canvas.js"></script>
<script src="../assets/js/htmlImage.js"></script>
<script>
    // 保存图片
    function saveFile() {
        const checkedImage = document.querySelector(".mui-control-item input[type='radio']:checked");
        if (!checkedImage) {
            mui.toast('请选择海报图片');
            return;
        }
        const idText = checkedImage.value;
        htmlImage.saveFileByHtml2(idText, 'thumb_image.png')
    }

    // 分享图片处理
    function shareImage() {
        const checkedImage = document.querySelector(".mui-control-item input[type='radio']:checked");
        if (!checkedImage) {
            mui.toast('请选择海报图片');
            return;
        }
        const idText = checkedImage.value;
        htmlImage.saveFileByHtml2(idText, function (canvas, image) {
            // 这个是图片(base64格式的 可以直接用在)
            console.log(image)
        })
    }

</script>